import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import TitleText from '../../../Discover/components/TitleText';
import { Image } from 'components/atoms';
import { Swiper, SwiperSlide } from 'swiper/react';
import Autoplay from '../../../Discover/components/Autoplay';
import Navigation from '../../../Discover/components/Navigation';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';


const useStyles = makeStyles(theme => ({
    PopularAlbumsRoot: {
        width: '100%',
        height: '100%',
        zIndex: 'auto',
        background: "#000",
        position: "relative",
        overflow: "hidden",
        paddingBottom: "100px",
        "& .swiper-image": {
            width: "90%",
            height: "300px",
            transition: ".5s",
            position: "relative",
            [theme.breakpoints.up('md')]: {
                height: "300px",
            },
        },
        "& .swiper-button": {
            position: 'absolute',
            bottom: '5%',
            left: '0',
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            opacity: 0,
            transition: ".8s",
            textTransform: "uppercase",
            "& .swiper-button-left": {
                width: "40%",
                background: "#7E53F9",
                color: "#fff",
                padding: "10px 5px",
                marginRight: "5px",
                textAlign: "center",
                display: "block",
                cursor: "pointer",
                [theme.breakpoints.up('md')]: {
                    display: "block"
                },
            },
            "& .swiper-button-right": {
                width: "40%",
                color: "#000",
                padding: "10px 5px",
                background: "#fff",
                marginLeft: "5px",
                textAlign: "center",
                display: "block",
                cursor: "pointer",
                [theme.breakpoints.up('md')]: {
                    display: "block"
                },
            },
        },
        "& .swiper-slide-active": {
            height: "400px",
            paddingBottom: 0,
            transition: ".5s",
            [theme.breakpoints.up('md')]: {
                height: "500px",
            },
            "& .swiper-image": {
                transition: ".5s",
                height: "300px",
                [theme.breakpoints.up('md')]: {
                    height: "400px",
                },
            },
            "& .swiper-button": {
                opacity: 1,
                transition: ".8s",
            }
        },
        '& .swiper-button-prev, & .swiper-button-next': {
            width: "36px",
            height: "36px",
            borderRadius: '100%',
            position: 'absolute',
            zIndex: 1000,
            background: theme.palette.primary.main,
            boxShadow: `0 2px 10px 0 ${theme.palette.cardShadow}`,
            border: `2px solid ${theme.palette.background.paper}`,
            '&:after': {
                fontSize: 'initial',
                color: theme.palette.background.paper,
            },
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
        },
        '& .swiper-button-prev': {
            left: "-250px",
            right: 0,
            top: 0,
            bottom: "180px",
            margin: "auto",
            [theme.breakpoints.up('md')]: {
                bottom: "80px",
            },
        },
        '& .swiper-button-next': {
            right: "-250px",
            left: 0,
            top: 0,
            bottom: "180px",
            margin: "auto",
            [theme.breakpoints.up('md')]: {
                bottom: "80px",
            },
        },
    },
    swiperSlide: {
        width: 'auto',
        height: "400px",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: "column",
        transition: ".5s",
        [theme.breakpoints.up('sm')]: {
        },
        [theme.breakpoints.up('md')]: {
            height: "500px",
        },
    },
    image: {
        objectFit: 'cover',
    },
    typography: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "20px",
        fontStyle: "normal",
        fontWeight: 400,
        lineHeight: "30px",
        textTransform: "uppercase",
        color: "#fff",
        [theme.breakpoints.up('md')]: {
            fontSize: "24px",
        },
    },
    typography1: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "16px",
        fontStyle: "normal",
        fontWeight: 400,
        lineHeight: "40px",
        textTransform: "uppercase",
        color: "#fff",
        [theme.breakpoints.up('md')]: {
            fontSize: "18px",
        },
    },
}));

const UserPlaylists = (props) => {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    
    const artistData = data.artist_albums
    const token = localStorage.getItem('token');
    const history = useHistory();

    const moveLink = (item) =>{
        console.log(item)
        window.location.reload()
    }

    useEffect(() => {
        let prev = document.querySelector(".swiper-button-prev")
        let next = document.querySelector(".swiper-button-next")
        if (prev && next) {
            prev.innerHTML = `<div style="">
            <i class="fa fa-chevron-left" style="color: #fff" />
        </div>`
            next.innerHTML = `<div style="">
            <i class="fa fa-chevron-right" style="color: #fff" />
        </div>`
        }
    }, [])

    return (
        <div className={classes.PopularAlbumsRoot}>
            <TitleText text={"ARTIST ALBUMS"} color="#fff" />

            <Swiper
                slidesPerView={'auto'}
                spaceBetween={0}
                loop={true}
                autoplay={{
                    delay: 5000,
                    disableOnInteraction: false,
                }}
                centeredSlides={true}
                breakpoints={{
                    320: {
                        slidesPerView: 1.5,
                    },
                    990: {
                        slidesPerView: 2,
                    },
                    1350: {
                        slidesPerView: 4,
                    }
                }}
                navigation={true}
                modules={[Autoplay, Navigation]}
            >
                {artistData && artistData.map((item, index) => (
                    <SwiperSlide
                        className={clsx(
                            'swiper-image__slide',
                            'swiper-slide',
                            classes.swiperSlide,
                        )}
                        key={index}
                    >
                        <div className={"swiper-image"}>
                            <Image
                                src={item.image}
                                alt={item.image}
                                srcSet={item.image}
                                lazyProps={{ width: '100%', height: '100%' }}
                                className={clsx(
                                    'swiper-image__item',
                                    classes.image,
                                )}
                            />
                            <div className={"swiper-button"}>
                                <div className={"swiper-button-left"}
                                 onClick={() => {
                                    window.location.href = `${process.env.REACT_APP_SERVER_URL}player/album/${item.id}/${token}`;
                                }}
                                >
                                    <a >
                                        listen to album
                                    </a>
                                </div>
                                <div className={"swiper-button-right"} 
                                 onClick={()=>moveLink(item)}
                                >
                                    <a >
                                        artist profile
                                    </a>
                                </div>
                            </div>
                        </div>

                        <Typography className={classes.typography1}>
                            {item.title}
                        </Typography>
                        <Typography className={classes.typography}>
                            {item.artistName}
                        </Typography>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div >
    )
}


UserPlaylists.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default UserPlaylists
